<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../inc/js.jsp"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>路由管理</title>
    <jsp:include page="../inc/css.jsp"/>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <jsp:include page="../inc/menu.jsp"/>

    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card" style="margin-top: 10px">
                        <div class="card-header">
                            <button type="button" title="新增路由" class="btn btn-success" onclick="_gatewayList.fn.addInfo()">新增路由</button>

                            <div class="form-inline" style="margin-top: 10px;">
                                <button type="button" title="查询" class="btn btn-info" onclick=""> 查询</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables" style="width: 99%">
                                    <colgroup>
                                        <col class="gradeA even"/>
                                        <col class="gradeA odd"/>
                                        <col class="gradeA even"/>
                                        <col class="gradeA odd"/>
                                        <col class="gradeA even"/>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>请求ID</th>
                                        <th>请求类型</th>
                                        <th>请求路径</th>
                                        <th>接口说明</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach var="n" items="${gatewayList}">
                                        <tr role="row" class="odd">
                                            <td>${n.id}</td>
                                            <td>${n.routeType}</td>
                                            <td>${n.path}</td>
                                            <td>${n.comment}</td>
                                            <td>
                                                <button type="button" title="删除" class="btn btn-danger btn-sm" onclick="_gatewayList.fn.delInfo(this)"><i class="fa fa-remove"></i></button>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<div class="modal inModal fade" id="gatewayModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">路由详情</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <form role="form" class="form-group">
                    <input type="hidden" id="gatewayId"/>

                    <div class="form-inline" style="margin-bottom: 10px;">
                        <label class="col-3">请求类型：</label>

                        <div class="col-9">
                            <select id="routeTypeList" class="form-control" style="width: 95%">
                                <option value="POST">POST</option>
                                <option value="GET">GET</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-inline" style="margin-bottom: 10px;">
                        <label class="col-3">请求路径：</label>

                        <div class="col-9">
                            <input type="text" id="gatewayPath" maxlength="200" class="form-control" style="width: 95%"/>
                        </div>
                    </div>

                    <div class="form-inline" style="margin-bottom: 10px;">
                        <label class="col-3">接口说明：</label>

                        <div class="col-9">
                            <input type="text" id="gatewayComment" maxlength="50" class="form-control" style="width: 95%"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="_gatewayList.fn.saveInfo()">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    let _gatewayList = {
        v: {
            list: []
        },
        fn: {
            addInfo: function () {
                $('#gatewayId').val('');
                $('#routeTypeList').val('POST');
                $('#gatewayPath').val('');
                $('#gatewayComment').val('');

                $("#gatewayModal").modal("show");
            },
            editInfo: function (self) {
                $('#gatewayId').val($(self).parent().prev().prev().prev().prev().html());
                $('#routeTypeList').val($(self).parent().prev().prev().prev().html());
                $('#gatewayPath').val($(self).parent().prev().prev().html());
                $('#gatewayComment').val($(self).parent().prev().html());

                $("#gatewayModal").modal("show");
            },
            saveInfo: function () {
                let path = $('#gatewayPath').val();
                let comment = $('#gatewayComment').val();

                if (path === '' || path.trim().length === 0) {
                    info('请输入请求路径', "error");
                    return;
                }

                if (comment === '' || comment.trim().length === 0) {
                    info('请输入接口说明', "error");
                    return;
                }

                startLoading();

                $.post('backend/gateway/update', {
                    id: $('#gatewayId').val(),
                    routeType: $('#routeTypeList').val(),
                    path: path,
                    comment: comment
                }, function (result) {
                    endLoading();

                    if (result.code === 0) {
                        info("路由信息已保存", "success");

                        setTimeout(function () {
                            window.location.reload();
                        }, 1000);
                    } else {
                        info(result.msg, "error");
                    }
                });
            },
            delInfo: function (self) {
                swal({
                    title: "您确定要删除这条路由信息吗",
                    text: "删除后将无法恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是的，删除！",
                    cancelButtonText: "不，取消",
                    closeOnConfirm: false,
                    closeOnCancel: false
                }, function (isConfirm) {
                    if (isConfirm) {
                        startLoading();

                        $.post('backend/gateway/delete', {
                            path: $(self).parent().prev().prev().html(),
                            comment: $(self).parent().prev().html()
                        }, function (result) {
                            endLoading();

                            if (result.code === 0) {
                                swal("删除成功！", "您已经删除了这条路由信息。", "success");

                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);
                            } else {
                                info(result.msg, "error");
                            }
                        });
                    } else {
                        swal("已取消", "您取消了删除操作！", "error");
                    }
                })
            }
        }
    };

    $(document).ready(function () {
        window.onload = function () {
            checkSelectMenu("gatewayLi");

            loadMenuColor('gatewayLi');
        }
    });
</script>
</body>
</html>
